<template>
  <div class="letter container">
    <h2>一封信(Beta)</h2>
    <p>写下
      <strong>此时此刻</strong>
      的
      <strong>想法</strong>
      ，在未来的
      <strong>某一天</strong>
      再来
      <strong>品一品</strong>
    </p>
    <a-form :form="form" @submit="handleSubmit">
      <a-row :gutter="30">
        <a-col :span="12">
          <a-form-item label="接收邮箱" has-feedback>
            <a-input
              size="large"
              v-decorator="['email', { rules: [{
                            min: 5,
                            max: 40,
                            type: 'email',
                            required: true,
                            whitespace: true,
                            message: '请输入正确的邮箱地址(5-40)个字符'
                          }] }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="发送日期" >
            <a-date-picker
              placeholder="请选择发送日期..."
              v-decorator="['send_time', { rules: [{
                            required: true,
                            message: '请选择发送日期...' }]
                          }]"
              format="YYYY-MM-DD HH:mm:ss"
              :disabledDate="disabledDate"
              :showTime="{ defaultValue: moment('YYYY-MM-DD', 'HH:mm:ss') }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="想法 | 发送以后即刻删除 | 暂时不推出保留功能" has-feedback>
        <a-textarea
          :rows="6"
          v-decorator="['content', { rules: [{
              min: 10,
              max: 300,
              required: true,
              message: '请输入您的想法(10-300)个字符' }]
            }]"
        />
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button type="primary"
                  html-type="submit"
                  size="large"
                  shape="round"
                  :loading="loading"
                  ghost>biu biu</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import app from "../../app";
  import moment from 'moment';
  export default {
    name: "letter",
    head: ()=>({ title: "一封信 - "+app.name }),
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: "letter"})
    },
    data:()=>({
      moment,
      loading: false,
    }),
    methods: {
      handleSubmit(e){
        e.preventDefault();
        this.loading = true;
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$axios.$post(`${app.api}/api/${app.apiVersion}/letter/`, values)
              .then((resp)=>{
                if (resp.code === 200) {
                  this.loading = false;
                  this.$message.success(resp.msg)
                  this.form.resetFields();
                }else {
                  this.loading = false;
                  this.$message.warning(resp.msg)
                }
              }).catch((err)=>{
              this.loading = false;
              this.form.resetFields();
            })
          }else {
            this.loading = false;
          }
        })
      },
      disabledDate(current) {
        return current && current < moment().endOf('day');
      },
    },
  }
</script>

<style scoped>
  .letter{
    margin-top: 120px;
    min-height: 60vh;
  }
  strong{
    color: red;
  }
  @media screen and (max-width: 1023px){
    .letter{
      margin-top: 70px;
      margin-left: 20px;
      margin-right: 20px;
    }
  }
</style>
